import { Col, Row } from 'antd';
import classNames from 'classnames';
import createReactContext from 'create-react-context';
import { isString } from 'lodash';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import warning from 'warning';
import './index.css';
import RcDrawer from './rc-drawer';
const DrawerContext = createReactContext(null);

export default class Drawer extends React.Component {
    static propTypes = {
        className: PropTypes.string,
        closable: PropTypes.bool,
        destroyOnClose: PropTypes.bool,
        getContainer: PropTypes.oneOfType([
            PropTypes.string,
            PropTypes.object,
            PropTypes.func,
            PropTypes.bool,
        ]),
        hasScroll: PropTypes.bool,
        mask: PropTypes.bool,
        maskClosable: PropTypes.bool,
        maskStyle: PropTypes.object,
        onClose: PropTypes.func,
        placement: PropTypes.string,
        prefixCls: PropTypes.string,
        style: PropTypes.object,
        title: PropTypes.node,
        visible: PropTypes.bool,
        width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
        zIndex: PropTypes.number,
    };

    static defaultProps = {
        closable: true,
        hasScroll: true,
        level: null,
        maskClosable: true,
        placement: 'right',
        prefixCls: 'edc-drawer',
        width: 256,
    };

    state = {
        push: false,
    };

    parentDrawer;
    destoryClose;
    componentDidUpdate(preProps) {
        if (preProps.visible !== this.props.visible && this.parentDrawer) {
            if (this.props.visible) {
                this.parentDrawer.push();
            } else {
                this.parentDrawer.pull();
            }
        }
    }
    close = (e) => {
        if (this.props.visible !== undefined) {
            if (this.props.onClose) {
                this.props.onClose(e);
            }
            return;
        }
    }
    onMaskClick = (e) => {
        if (!this.props.maskClosable) {
            return;
        }
        this.close(e);
    }
    push = () => {
        this.setState({
            push: true,
        });
    }
    pull = () => {
        this.setState({
            push: false,
        });
    }
    onDestoryTransitionEnd = () => {
        const isDestroyOnClose = this.getDestoryOnClose();
        if (!isDestroyOnClose) {
            return;
        }
        if (!this.props.visible) {
            this.destoryClose = true;
            this.forceUpdate();
        }
    }

    getDestoryOnClose = () => (this.props.destroyOnClose && !this.props.visible);

    renderBody = () => {
        if (this.destoryClose && !this.props.visible) {
            return null;
        }
        this.destoryClose = false;
        const { placement } = this.props;

        const containerStyle = placement === 'left'
            || placement === 'right' ? {
                height: '100%',
                overflow: 'auto',
            } : {};

        const isDestroyOnClose = this.getDestoryOnClose();
        if (isDestroyOnClose) {
            // Increase the opacity transition, delete children after closing.
            containerStyle.opacity = 0;
            containerStyle.transition = 'opacity .3s';
        }
        const { prefixCls, title, closable, icon, iconBgcolor } = this.props;
        let header;
        if (title) {
            const titleEle = (
                <Row>
                    <Col span="22" style={{ paddingLeft: 24, }}>
                        <div className='prel'>
                            {icon && <div className="wea-browser-single-icon-circle wea-dialog-icon" style={{ background: iconBgcolor }}>
                                <i className={icon} />
                            </div>}
                            <div style={{ verticalAlign: 'middle', display: 'inline-block' }} className='text-elli' title={isString(title) ? title : ''}>{title}</div>
                        </div>
                    </Col>
                </Row>
            );
            header = (
                <div className={`${prefixCls}-header`}>
                    <div className={`${prefixCls}-title`}>{titleEle}</div>
                </div>
            );
        }
        let closer;
        if (closable) {
            closer = (
                <button
                    onClick={this.close}
                    aria-label="Close"
                    className={`${prefixCls}-close`}
                >
                    <span className={`${prefixCls}-close-x`} />
                </button>
            );
        }
        return (
            <div
                className={`${prefixCls}-wrapper-body`}
                style={containerStyle}
                onTransitionEnd={this.onDestoryTransitionEnd}
            >
                {header}
                {closer}
                {this.props.hasScroll ?
                    <div style={{ height: `calc(100% - ${this.props.footer ? 100 : 47}px)`, overflow: 'hidden' }}>
                        <div className={`${prefixCls}-body`} style={this.props.style}>
                            {this.props.children}
                        </div>
                    </div>
                    :
                    <div className={`${prefixCls}-body`} style={this.props.style}>
                        {this.props.children}
                    </div>
                }
                <div className={`${prefixCls}-footer`}>
                    {this.props.footer}
                </div>
            </div>
        );
    }
    renderProvider = (value) => {
        const { zIndex, style, placement, className, wrapClassName, ...rest } = this.props;
        warning(wrapClassName === undefined, 'wrapClassName is deprecated, please use className instead.');
        const RcDrawerStyle = this.state.push
            ? {
                transform: `translateX(${placement === 'left' ? 180 : -180}px)`,
                zIndex
            }
            : { zIndex };
        this.parentDrawer = value;

        return (
            <DrawerContext.Provider value={this}>
                <RcDrawer
                    {...rest}
                    handler={false}
                    open={this.props.visible}
                    onMaskClick={this.onMaskClick}
                    showMask={this.props.mask}
                    placement={placement}
                    style={RcDrawerStyle}
                    className={classNames(wrapClassName, className)}
                >
                    {this.renderBody()}
                </RcDrawer>
            </DrawerContext.Provider>
        );
    }
    render() {
        return (
            <DrawerContext.Consumer>{this.renderProvider}</DrawerContext.Consumer>
        );
    }
}